<template>
  <cj-popup v-model="isShow" round :closeable="true" closeIconPosition="bottom-center">
    <div class="c-ww540">
      <header class="c-hh200 c-pt16">
        <img class="c-w100" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/recommend/recommend-present-top2.png" alt="">
      </header>
      <article class="gift-body-bg c-ph64 c-pb20 c-maxh400 c-contexty-scroll c-p c-pz2">
        <section v-for="(item, index) in vipOrderGiftList" :key="index">
          <!-- 积分 -->
          <div v-if="item.type == 1" class="c-pv10">
            <div class="c-bg-white c-hh120 c-flex-row c-w100 c-pr10">
              <div class="c-h c-ww120 c-pv16 c-ph16 c-flex-row c-flex-center">
                <img class="c-h" src="@/assets/i/wap/vip/point.png" />
              </div>
              <div class="c-pl20 c-pr10 c-h c-w0 c-flex-grow1 c-pt16 c-fs24">{{ '奖励' + item.value + customPointName }}</div>
              <div class="c-ww88 c-hh36 c-br18 c-fs22 c-flex-row c-flex-center c-bg-sorange c-fc-white c-mv-auto" @click="goMyPointDetail">查看</div>
            </div>
          </div>
          <!-- 亲情卡 -->
          <div v-if="item.type == 2" class="c-pv10">
            <div class="family-card-bg c-bg-white c-hh120 c-pv16 c-pl20 c-pr10 c-flex-column c-w100">
              <div class="c-pl120 c-pr10 c-fs24 c-fc-white">{{ item.name || '亲情卡' }}</div>
              <div class="c-ww88 c-hh36 c-br18 c-fs22 c-flex-row c-flex-center c-bg-white c-fc-smblue c-ml-auto c-mt-auto" @click="goPresent">查看</div>
            </div>
          </div>
          <!-- 会员体验卡 -->
          <div v-if="item.type == 3 || item.type == 4" class="c-pv10">
            <div :class="item.type == 3 ? 'vip-card-bg' : 'svip-card-bg'" class="c-bg-white c-hh120 c-pv16 c-pl20 c-pr10 c-flex-column c-w100">
              <div class="c-pl120 c-pr10 c-fs24 c-fc-white">{{ item.name }}</div>
            </div>
          </div>
          <!-- 实物赠送 -->
          <div v-if="item.type == 7" class="c-pv10">
            <div class="c-bg-white c-hh120 c-flex-row c-w100 c-aligni-start">
              <img class="c-ww120 c-h" :src="item.value && item.value.freeGoodImg || require('@/assets/defult270.png')" />
              <div class="c-pl20 c-pr10 c-flex-column c-w0 c-flex-grow1 c-pt16 c-fs24 c-text-ellipsis2">{{ item.value && item.value.freeGoodName }}</div>
            </div>
          </div>
          <!-- 兑换券 -->
          <div v-if="item.type == 5" class="c-pv10">
            <div class="c-hh120 c-flex-row c-w100">
              <div class="exchange-bg c-ww120 c-hh120 c-flex-row c-flex-center c-fs30 c-fc-white">{{ showCouponTypeText(item) }}</div>
              <div class="c-bg-white c-flex-grow1 c-w0 c-flex-column c-pl20 c-pr10 c-pt16">
                <span class="c-fs24 c-fc-xblack c-text-ellipsis1">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <!-- 代金券 -->
          <div v-if="item.type == 6" class="c-pv10">
            <div class="c-hh120 c-flex-row c-w100">
              <div class="coupon-bg c-ww120 c-hh120 c-flex-row c-flex-center c-fs30 c-fc-white">代金券</div>
              <div class="c-bg-white c-flex-grow1 c-w0 c-flex-column c-pl20 c-pr10 c-pt16">
                <span class="c-fs24 c-fc-xblack c-text-ellipsis1">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </section>
      </article>
      <footer class="c-hh130">
        <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/recommend/recommend-present-bot.png" alt="" class="c-w100">
      </footer>
    </div>

  </cj-popup>
</template>

<script>
export default {
  components: {},

  props: {
    vipOrderGiftList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },

  data() {
    return {
      customPointName: localStorage.getItem('customPointName'),
      isShow: false,
      vipOrderGiftList:[],
    };
  },
  beforeDestroy() {
    this.isShow = false;
  },
  methods: {
    showCouponTypeText(item) {
      let couponTypeText = ''
      if (item.value && item.value.type == 1) {
        couponTypeText = '兑换券'
      } else if (item.value && item.value.type == 5) {
        couponTypeText = '折扣券'
      } else if (item.value && (item.value.type == 2 || item.value.type == 3)) {
        couponTypeText = '满减券'
      }
      return couponTypeText;
    },
    public_open() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
      this.$emit('close');
    },
    goPresent() {
      this.close();
      this.$routerGo(this, 'push', { path: '/member/presentCourse/presentCourseList' });
    },
    goMyPointDetail() {
      this.close();
      this.$routerGo(this, 'push', { path: '/member/myIntegral/integralDetail' });
    }
  }
};
</script>

<style scoped>
.family-card-bg {
  background: url('../../../assets/i/wap/vip/familyCard.png');
  background-size: cover;
}
.vip-card-bg {
  background: url('../../../assets/i/wap/recommend/VIP.png');
  background-size: cover;
}
.svip-card-bg {
  background: url('../../../assets/i/wap/recommend/SVIP.png');
  background-size: cover;
}
.gift-body-bg {
  background: url("../../../assets/i/wap/recommend/recommend-present-mid.png") no-repeat;
  background-size: 100% 100%;
}
.coupon-bg {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.exchange-bg{
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
</style>
